<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>导入订单数据</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">
    <style type="text/css">
        .update {
            display: inline-block;
            margin-left: 15px;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            background: #009789;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
        }

        .update i {
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
            width: 30px;
            height: 30px;
            background: url();
        }
    </style>

    <div class="layui-tab layui-tab-brief" lay-filter="demo">
        <ul class="layui-tab-title">
            <li><a th:href="@{/pdd/dashboard(shopId=${shopId})}">店铺首页</a></li>
            <li ><a th:href="@{/pdd/order_list(shopId=${shopId})}">订单管理</a></li>
            <li class="layui-this"><a th:href="@{/pdd/order_excel_import(shopId=${shopId})}">excel导入订单数据</a></li>
        </ul>
    </div>

    <!-- start sp-wrapper -->


    <div class="dd-wrapper" id="sp-data" th:utext="${replayHtml}">

    </div>
    <fieldset class="layui-elem-field">
        <legend>上传订单Excel文件(代发供应商提供)</legend>
        <div class="layui-field-box">
            <form class="layui-form layui-form-pane1" enctype="multipart/form-data" >

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="file" name="excel" id="excel" placeholder="" class="layui-input" lay-verify=”required”/>
                    </div>
                    <div class="layui-inline">
                        <a class="layui-btn layui-btn-primary" id="excel_upload_btn">上传excel</a>
                        <span id="excel_upload_btn_" style="display: none;" class="update"><i></i>上传中......</span>
                    </div>
                </div>

            </form>
        </div>
    </fieldset>

    <script type="text/javascript" src="/sb/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#excel_upload_btn").click(function () {
                var excel = $("#excel").val();
                if (excel == '') {
                    alert("请选择文件");
                    return false;
                } else if (excel.lastIndexOf(".xls") < 0) {//可判断以.xls和.xlsx结尾的excel
                    alert("只能上传Excel文件");
                } else if (excel.lastIndexOf(".xlsx") < 0) {
                    alert("只能上传Excel文件");
                } else {
                    var url = "order_excel_upload?shopId=[[${shop.id}]]";
                    // var formData = new FormData($('#execl_form')[0]);

                    var formData = new FormData();
                    formData.append("excel", document.getElementById("excel").files[0]);
                    $(this).hide();
                    $("#excel_upload_btn_").show();
                    $.ajax({
                        url: url,
                        type: "post",
                        data: formData,
                        success: function (result) {
                            console.log(result);
                            alert(result.msg);
                            window.location.href = '/pdd/order_list?shopId=[[${shopId}]]';
                            return false;
                        },
                        error: function () {
                            $("#excel_upload_btn_").hide();
                            $("#excel_upload_btn").show();
                            alert("excel上传失败");
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                }

                return false;
            })

        });
    </script>
    <!-- end sp-wrapper -->

      </div>
    </div>
</div>
</body>
<html>
